<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>重庆耀炎食品有限公司</title>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/Product.css">
</head>

<body>
<div class="main">
    <!--导航栏-->
    <div class="container nav-container">
        <ul class="nav">
            <!--首页-->
            <li class="nav-item ">
                <a href="../index.html">首页</a>
            </li>
            <!--品牌与产品-->
            <li class="nav-item active">
                <a href="Product.html">品牌与产品</a>
            </li>
            <!--联合营作-->
            <li class="nav-item">
                <a href="Cooperation.html">联合营作</a>
            </li>
            <!--logo-->
            <li class="nav-item mid_logo">耀炎食品</li>
            <!--配套服务-->
            <li class="nav-item">
                <a href="Service.html">配套服务</a>
            </li>
            <!--门店信息-->
            <li class="nav-item">
                <a href="Info.html">门店信息</a>
            </li>
            <!--关于我们-->
            <li class="nav-item nav-about">
                <a href="About.html">关于我们</a>
                <div class="nav-about-list">
                    <p>企业</p>
                    <p>加入我们</p>
                </div>
            </li>
        </ul>
    </div>
    <!--轮播图-->
    <header class="container swiper-container">
        <!--图片展示区-->
        <div class="swiper-slider">
            <div class="swiper-item show">
                <img src="../imgs/banner1.png" alt="图片1">
            </div>
            <div class="swiper-item">
                <img src="../imgs/banner2.jpg" alt="图片2">
            </div>
            <div class="swiper-item">
                <img src="../imgs/banner3.jpg" alt="图片3">
            </div>
        </div>
        <!--左侧按钮-->
        <div class="swiper-button swiper-button-prev">
            <img src="../imgs/left.png" alt="上一张">
        </div>
        <!--右侧按钮-->
        <div class="swiper-button swiper-button-next">
            <img src="../imgs/right.png" alt="下一张">
        </div>
    </header>

    <!--品牌与产品-->
    <article class="container article">
        <div class="content">
            <!--标题-->
            <div id="content_title">
                <ul>
                    <li id="li_two" onclick="chooseSort(false)">全部产品</li>
                    <li id="li_one" onclick="chooseSort(true)">百滋百特</li>
                </ul>
            </div>
            <!--Δ-->
            <div id="triangle"></div>
            <!--分类-->
            <div id="sort">
                <ul>
                    <li class="sort-li">美味甜甜圈</li>
                    <li class="sort-li">芝士蛋糕</li>
                    <li class="sort-li">闪电泡芙</li>
                    <li class="sort-li">慕斯甜甜圈</li>
                    <li class="sort-li">软欧圈</li>
                    <li class="sort-li">麦芬圈</li>
                    <li class="sort-li">起酥圈</li>
                    <li class="sort-li">常规蛋糕</li>
                    <li class="sort-li">果汁茶饮</li>
                </ul>
            </div>
            <!--正文（图片）-->
            <div id="content-img">
                <div class="content-img-wrapper">
                    <!--第一行-->
                    <div class="img-row">
                        <!--1-->
                        <div class="img_1" onmouseover="productOver(1)" onmouseout="productOut(1)"></div>
                        <!--2-->
                        <div class="img_2">
                            <img src="../imgs/芝士蛋糕.png" onmouseover="productOver(2)" onmouseout="productOut(2)"
                                 alt="product2">
                        </div>
                        <!--3-->
                        <div class="img_3">
                            <img src="../imgs/闪电泡芙.png" onmouseover="productOver(3)" onmouseout="productOut(3)"
                                 alt="product3">
                        </div>
                    </div>
                    <!--第二行-->
                    <div class="img-row">
                        <!--4-->
                        <div class="img_4">
                            <img src="../imgs/慕斯甜甜圈.png" onmouseover="productOver(4)" onmouseout="productOut(4)"
                                 alt="product4">
                        </div>
                        <!--5-->
                        <div class="img_5">
                            <img src="../imgs/软欧圈.png" onmouseover="productOver(5)" onmouseout="productOut(5)"
                                 alt="product5">
                        </div>
                        <!--6-->
                        <div class="img_6">
                            <img src="../imgs/麦芬圈.png" onmouseover="productOver(6)" onmouseout="productOut(6)"
                                 alt="product6">
                        </div>
                    </div>
                    <!--第三行-->
                    <div class="img-row">
                        <!--7-->
                        <div class="img_7">
                            <img src="../imgs/美味甜甜圈.png" onmouseover="productOver(7)" onmouseout="productOut(7)"
                                 alt="product7">
                        </div>
                        <!--8-->
                        <div class="img_8">
                            <img src="../imgs/芝士蛋糕.png" onmouseover="productOver(8)" onmouseout="productOut(8)"
                                 alt="product8">
                        </div>
                        <!--9-->
                        <div class="img_9">
                            <img src="../imgs/闪电泡芙.png" onmouseover="productOver(9)" onmouseout="productOut(9)"
                                 alt="product9">
                        </div>
                    </div>
                    <!--分类介绍-->
                    <div class="text" style="display: none;">
                        <div class="text_box">
                            <!--标题-->
                            <p class="title">美味甜甜圈</p>
                            <!--正文-->
                            <p>甜甜圈，百滋百特秘制配方，纯手工制作，每一个圈都堪称经典。低糖低油，口感松软，外形精致···
                                甜甜圈，百滋百特秘制配方，纯手工制作，每一个圈都堪称经典。低糖低油，口感松软，外形精致···</p>
                            <p>甜甜圈，百滋百特秘制配方，纯手工制作，每一个圈都堪称经典。低糖低油，口感松软，外形精致。</p>
                            <p>甜甜圈，百滋百特秘制配方，纯手工制作，每一个圈都堪称经典。低糖低油，口感松软，外形精致
                                甜甜圈，百滋百特秘制配方，纯手工制作，每一个圈都堪称经典。低糖低油，口感松软，外形精致···
                                &nbsp;&nbsp;&nbsp;&nbsp;甜甜圈，百滋百特秘制配方，纯手工制作，每一个圈都堪称经典。低糖低油，口感松软，外形精致。
                                甜甜圈，百滋百特秘制配方，纯手工制作，每一个圈都堪称经典。低糖低油，口感松软，外形精致···</p>
                        </div>
                    </div>
                    <!--产品介绍-->
                    <div class="little_text" style="display: none;">
                        <div class="little_text_box">
                            <!--标题-->
                            <p class="little_title">美味甜甜圈</p>
                            <!--正文-->
                            <p>甜甜圈，百滋百特秘制配方，纯手工制作，每一个圈都堪称经典。低糖低油，口感松软，外形精致
                                甜甜圈，百滋百特秘制配方，纯手工制作，每一个圈都堪称经典。低糖低油，口感松软，外形精致···
                                &nbsp;&nbsp;&nbsp;&nbsp;甜甜圈，百滋百特秘制配方，纯手工制作，每一个圈都堪称经典。低糖低油，口感松软，外形精致。
                                甜甜圈，百滋百特秘制配方，纯手工制作，每一个圈都堪称经典。低糖低油，口感松软，外形精致···</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </article>

    <!--页脚-->
    <footer class="container footer">
        <!--左侧企业介绍-->
        <div class="footer_left">
            <p>重庆耀炎食品有限公司</p>
            <p>地址：重庆市渝中区龙湖时代天街C馆17栋</p>
            <p>耀炎食品&copy;版权所有</p>
        </div>
        <!--中间产品logo-->
        <div class="footer_mid">耀炎食品</div>
        <!--右侧联系方式-->
        <div class="footer_right">邮箱:info@yaoyanfood.com</div>
    </footer>
</div>
</body>
<script src="../js/header.js"></script>
<script src="../js/product.js"></script>
</html>